<template>
    <starGrid :row="'40px 40px 40px 40px'" :column="'100px auto 40px'"
              :area="'a1 b1 c1,a2 b2 c2,a3 b3 c3,a4 b4 c4'" style="border:none; width: 500px">
        <starLabel style="grid-area: a1">{{ lang.propertyName }}</starLabel>
        <Input style="grid-area: b1" v-model="data.propertyName" transfer :clearable="false"></Input>
        <starLabel style="grid-area: a2">{{ lang.propertyType }}</starLabel>
        <Select style="grid-area: b2" v-model="data.propertyType" transfer :clearable="false">
            <Option v-for="item in type" :key="item.label" :value="item.value">{{ item.label }}</Option>
        </Select>
        <starLabel style="grid-area: a3">{{ lang.defaultValue }}</starLabel>
        <Input style="grid-area: b3" v-model="data.defaultValue"></Input>
        <starLabel style="grid-area: a4">{{ lang.comments }}</starLabel>
        <Input style="grid-area: b4" v-model="data.comments"></Input>
    </starGrid>
</template>

<script>
import starGrid from '../../../../layout/starGrid';
import starLabel from '../../../../basic/starLabel';
export default {
    name: "cfg-property",
    components: {starGrid,starLabel},
    props: {
        data: {
            default: () => {
                return null;
            }
        },
        type: {
            default: () => {
                return [];
            }
        },
    },
    computed: {
        lang() {
            return {
                "en-US": {
                    propertyName: 'propertyName',
                    propertyType: 'propertyType',
                    defaultValue: 'defaultValue',
                    comments: 'comments'
                },
                "zh-CN": {
                    propertyName: '属性名称',
                    propertyType: '属性类型',
                    defaultValue: '默认值',
                    comments: '说明'
                },
            }[this.G_Locale]
        },
    }
}
</script>
